<template>
	<view class="gui-padding">
		<swiper class="activity-swiper" indicator-active-color="#FFF"
			indicator-color="rgba(255,255,255,0.8)" :indicator-dots='true' :autoplay='true'
			:circular='true'>
			<swiper-item class="activity-flex" v-for="(item,index) in data">
				<view class="activity-card">
					<view class="activity-view" @click="to_url(item[0])">
						<image :src="item[0]!=null ? item[0].icon : bg_null" mode="scaleToFill"></image>
					</view>
					<view class="activity-grid-container">
						<view class="activity-grid-item" v-for="(item2,index2) in item[1]"
							@click="to_url(item2)">
							<image :src="item2!=null ? item2.icon : bg_null" mode="scaleToFill"></image>
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>
<script>
export default{
	name  : "notice",
	props : {
		width        : {type:Number, default:0},
		text         : {type:String, default:''},
		size         : {type:Number, default:26},
		lineHeight   : {type:Number, default:1.8},
		padding      : {type:Number, default:15},
		margin       : {type:Number, default:15},
		customClass      : {type:Array,  default:function(){
			return ['gui-bg-primary', 'gui-color-white'];
		}},
		borderRadius : {type:Number, default:6},
		data         : {type:Array, default:function(){return [];}},
		borderColor  : {type:String, default:'rgba(255,255,255,0)'},
		backColor  : {type:String, default:'rgba(255,255,255,0)'}
	},
	data() {
		return {
			tapping : false,
			bg_null: 'https://app.lgwisdomunion.cn/API-RESOURCE/webView?fid=631597ff1d190122e608e5d5',
			// imageList:list
		}
	},
	created() {
		console.log("creatd",this.d);
	},
	methods:{
		tapme : function(){
			this.$emit('tapme', this.data);
		},
		to_url(items) {
			if (items == null) {
				this.$boya.msg('暂未开放')
			}
			console.log(items)
		},
	},
	emits : ['tapme']
}
</script>
<style lang="scss" scoped>
.gui-tags{text-align:center;}
.gui-tag-opacity{opacity:0.88;}

	
.activity-swiper {
		height: 400rpx;
	}
	.activity-flex {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.activity-view {
		margin: 10rpx 0 25rpx 20rpx;
		width: 45%;
		height: 93%;
	
		image {
			border-radius: 10rpx;
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}
	
	.activity-grid-container {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 15rpx;
		width: 65%;
		height: 93%;
		margin: 10rpx 25rpx 25rpx 15rpx
	}
	.activity-grid-item {
		// border: 1px solid #ccc;
		width: 100%;
		height: 100%;
	
		image {
			border-radius: 5px;
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}
	
	.activity-card {
		display: flex;
		width: 99%;
		height: 99%;
		border-radius: 5px;
		box-shadow: 0 0 5rpx rgba(0, 0, 0, 0.2);
		background: linear-gradient(rgb(201, 215, 254), rgb(248, 250, 253));
	}
</style>